<!--/*-->
<!--*   @Author: DeepSeek-->
<!--*   @Contributor: 1296-->
<!--*   @Date: 2025-03-11-->
<!--*   @Description: 加载插件-->
<!--*/-->

<!--<template>-->
<!--  <div class="loading-overlay" :style="{ background: overlayColor }">-->
<!--    <div class="loading-content">-->
<!--      <div v-if="type === 'spinner'" class="spinner"></div>-->
<!--      <div v-else-if="type === 'dots'" class="dots-loader"></div>-->
<!--      <div v-else class="bar-loader"></div>-->
<!--      <div class="loading-text">{{ $t(text) }}...</div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'LoadingSpinner',-->
<!--  props: {-->
<!--    type: {-->
<!--      type: String,-->
<!--      default: 'spinner',-->
<!--      validator: val => ['spinner', 'dots', 'bar'].includes(val)-->
<!--    },-->
<!--    text: {-->
<!--      type: String,-->
<!--      default: 'loading'-->
<!--    },-->
<!--    overlayColor: {-->
<!--      type: String,-->
<!--      default: 'rgba(255, 255, 255, 0.9)'-->
<!--    },-->
<!--    color: {-->
<!--      type: String,-->
<!--      default: '#3498db'-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.loading-overlay {-->
<!--  position: fixed;-->
<!--  top: 0;-->
<!--  left: 0;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  z-index: 9999;-->
<!--  backdrop-filter: blur(2px);-->
<!--  transition:-->
<!--      opacity 0.3s ease,-->
<!--      visibility 0.3s linear;-->
<!--}-->

<!--.spinner {-->
<!--  width: 40px;-->
<!--  height: 40px;-->
<!--  border: 4px solid #f3f3f3;-->
<!--  border-top: 4px solid v-bind(color);-->
<!--  border-radius: 50%;-->
<!--  animation: spin 1s linear infinite;-->
<!--}-->

<!--.dots-loader {-->
<!--  display: flex;-->
<!--  gap: 8px;-->
<!--}-->

<!--.dots-loader::after {-->
<!--  content: "•••";-->
<!--  font-size: 24px;-->
<!--  color: v-bind(color);-->
<!--  animation: dots 1s infinite;-->
<!--}-->

<!--.bar-loader {-->
<!--  width: 120px;-->
<!--  height: 4px;-->
<!--  background: #eee;-->
<!--  position: relative;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.bar-loader::before {-->
<!--  content: "";-->
<!--  position: absolute;-->
<!--  width: 40%;-->
<!--  height: 100%;-->
<!--  background: v-bind(color);-->
<!--  animation: bar 1.5s infinite;-->
<!--}-->

<!--@keyframes spin {-->
<!--  to {-->
<!--    transform: rotate(360deg);-->
<!--  }-->
<!--}-->

<!--@keyframes dots {-->
<!--  0%, 20% {-->
<!--    opacity: 0.2;-->
<!--  }-->
<!--  50% {-->
<!--    opacity: 1;-->
<!--  }-->
<!--  100% {-->
<!--    opacity: 0.2;-->
<!--  }-->
<!--}-->

<!--@keyframes bar {-->
<!--  0% {-->
<!--    left: -40%;-->
<!--  }-->
<!--  100% {-->
<!--    left: 140%;-->
<!--  }-->
<!--}-->

<!--.loading-text {-->
<!--  margin-top: 16px;-->
<!--  color: v-bind(color);-->
<!--  font-size: 0.9em;-->
<!--}-->
<!--</style>-->